<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>妈的言击术</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/jquery.fullPage.css" />
		<link rel="stylesheet" href="css/page01.css" />
		<link rel="stylesheet" href="css/page02.css" />
		<link rel="stylesheet" href="css/page03.css" />
		<link rel="stylesheet" href="css/page04.css" />
		<link rel="stylesheet" href="css/page05.css" />
		<link rel="stylesheet" href="css/page06.css" />
		<link rel="stylesheet" href="css/page07.css" />
		<link rel="stylesheet" href="css/page08.css" />
		<link rel="stylesheet" href="css/page09.css" />
	
		
	</head>
	<body style="opacity: 0;">
		<div class="music">
			<a href="javascript:;">
				<img src="img/music.svg" alt="" />
			</a>
		</div>
		<div class="page-audio">
			<audio src="media/qlz.mp3" id="bg-music"  autoplay="autoplay"  preload="auto"></audio>
		</div>
		<div id="web">
		<!--page01开始-->
			<div class="section">
				<div class="page page01">
					<div class="check">
						<div class="content-border">
							<a href="javascript:;"><img src="img/page01-0.png" alt="" /></a>
							<div class="mother">
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-1" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-2" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-left-01" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-left-02" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-left-03" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-right-01" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-right-02" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-right-03" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-right-04" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-front" alt="" />
								</a>
								<a href="javascript:;">
									<img src="img/page01-01.png" class="mother-back" alt="" />
								</a>							
							</div>
						</div>
						<div class="mother-title">
							<a href="javascript:;">
								<img src="img/page01-02.png" alt="" />
							</a>
						</div>
						<div class="small-area">
							<p class="small-p1">妈妈用她修炼几十年的“言击术</p>
							<p class="small-p2">打得我们没有还手之力</p>
						</div>
						<div class="circle-box">
							<div class="circle circle-title01">吐槽</div>
							<div class="circle circle-title02">嘲讽</div>
							<div class="circle circle-title03">说教</div>
							<div class="circle circle-title04">人身攻击</div>
						</div>
					</div>
					
					
					
				</div>
				
			</div>
			<!--page01结束-->
			
			<!--page02开始-->
			<div class="section">
				<div class="page page02">
					<div class="check">
						<div class="page02-border">
							<a href="javascript:;">
								<img src="img/page02-0.png" alt="" />
							</a>
						</div>
						<div class="page02-mother">
							<a href="javascript:;">
								<img src="img/page02-04.png" alt="" />
							</a>
						</div>
						<div class="page02-mother-speech01">
							<a href="javascript:;">
								<img src="img/page02-05.png" alt="" />
							</a>
						</div>					
						<!--<div class="page02-mother-speech02">
							<a href="javascript:;">
								<img src="img/page02-01.png" alt="" />
							</a>
						</div>-->
						<div class="content-border">
							<div class="page02-mother-son">
								<a href="javascript:;">
									<img src="img/page02-03.png" alt="" />
								</a>
							</div>
							<div class="page02-phone">
								<a href="javascript:;">
									<img src="img/page02-07.png" alt="" />
								</a>
							</div>
							<div class="page02-mother-speech02">
								<a href="javascript:;">
									<img src="img/page02-01.png" alt="" />
								</a>
							</div>
							<div class="page02-mother-flower">
								<a href="javascript:;">
									<img src="img/page02-02.png" alt="" />
								</a>
							</div>
							<div class="page02-mother-title">
								<p>第一式——看你安静的呆着就是不舒服</p>
							</div>
						</div>
					</div>
					
					
				</div>
			</div>
			<!--page02结束-->
			
			<!--page03开始-->
			<div class="section">
				<div class="page page03">
					<div class="check">
						<div class="page03-border">
							<a href="javascript:;">
								<img src="img/page02-0.png" alt="" />
							</a>
						</div>
						<div class="content-border">
							<div class="page03-daughter">
								<a href="javascript:;">
									<img src="img/page03-05.png" alt="" />
								</a>
							</div>
							<div class="page03-mother-speech01">
								<a href="javascript:;">
									<img src="img/page03-06.png" alt="" />
								</a>
							</div>
							<div class="page03-mother-speech02">
								<a href="javascript:;">
									<img src="img/page03-01.png" alt="" />
								</a>
							</div>
							<div class="page03-mother">
								<a href="javascript:;">
									<img src="img/page03-04.png" alt="" />
								</a>
							</div>
							<div class="page03-mother-shadow">
								<a href="javascript:;">
									<img src="img/page03-07.png" alt="" />
								</a>
							</div>
							<div class="page03-mother-ball">
								<a href="javascript:;">
									<img src="img/page03-03.png" alt="" />
								</a>
							</div>
							<div class="page03-mother-sd">
								<a href="javascript:;">
									<img src="img/page03-02.png" alt="" />
								</a>
							</div>
							<div class="page03-mother-title">
								<p>第二式——在妈眼里你永远吃不饱</p>
							</div>
							
						</div>
					</div>
					

				</div>
			</div>
			<!--page03结束-->
			
			<!--page04开始-->
			<div class="section">
				<div class="page page04">
					<div class="check">
						<div class="page04-border">
							<a href="javascript:;">
								<img src="img/page04-0.png" alt="" />
							</a>
						</div>
						<div class="content-border">
							<div class="page04-mother">
								<a href="javascript:;">
									<img src="img/page04-01.png" alt="" />
								</a>
							</div>
							<div class="page04-mother-shadow">
								<a href="javascript:;">
									<img src="img/page04-05.png" alt="" />
								</a>
							</div>
							<div class="page04-mother-son">
								<a href="javascript:;">
									<img src="img/page04-02.png" alt="" />
								</a>
							</div>
							<div class="page04-son-shadow">
								<a href="javascript:;">
									<img src="img/page04-06.png" alt="" />
								</a>
							</div>
							<div class="page04-mother-son2">
								<a href="javascript:;">
									<img src="img/page04-07.png" alt="" />
								</a>
							</div>
	
							<div class="page04-mother-speech02">
								<a href="javascript:;">
									<img src="img/page04-04.png" alt="" />
								</a>
							</div>
							<div class="page04-mother-speech01">
								<a href="javascript:;">
									<img src="img/page04-03.png" alt="" />
								</a>
							</div>
							<div class="page04-mother-title">
								<p>第三式——这招借刀杀人叫做“比人的孩子”</p>
							</div>
						</div>
					</div>
					
				</div>
			</div>				
			<!--page04结束-->
			
			<!--page05结束-->
			<div class="section">
				<div class="page page05">
					<div class="check">
						<div class="page05-border">
							<a href="javascript:;">
								<img src="img/page04-0.png" alt="" />
							</a>
						</div>
						<div class="content-border">
							<div class="page05-mother-speech01">
								<a href="javascript:;">
									<img src="img/page05-mother-speech01.png" alt="" />
								</a>
							</div>
							<div class="page05-mother">
								<a href="javascript:;">
									<img src="img/page05-mother.png" alt="" />
								</a>
							</div>
							<div class="page05-mother-speech02">
								<img src="img/page05-mother-speech02.png" alt="" />
							</div>
							<div class="page05-daughter">
								<a href="javascript:;">
									<img src="img/page05-daughter.png" alt="" />
								</a>
							</div>
							<div class="page05-daughter2">
								<a href="javascript:;">
									<img src="img/page05-daughter.png" alt="" />
								</a>
							</div>
							<div class="page05-mother-ball">
								<a href="javascript:;">
									<img src="img/page05-mother-ball.png" alt="" />
								</a>
							</div>
							<div class="page05-mother-ball2">
								<a href="javascript:;">
									<img src="img/page05-mother-ball2.png" alt="" />
								</a>
							</div>
							<div class="page05-mother-shadow">
								<a href="javascript:;">
									<img src="img/page05-mother-shadow.png" alt="" />
								</a>
							</div>
							<div class="page05-mother-shadow2">
								<a href="javascript:;">
									<img src="img/page05-mother-shadow-2.png" alt="" />
								</a>
							</div>
							<div class="page05-mother-title">
								<p>第四式———不去找对象和一条咸鱼有什么区别</p>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			<!--page05结束-->
			
			<!--page06开始-->
			<div class="section">
				<div class="page page06">
					<div class="check">
						<div class="page06-border">
							<a href="javascript:;">
								<img src="img/page06-0.png" alt="" />
							</a>
						</div>
						<div class="content-border">
							<div class="page06-mother">
								<a href="javascript:;">
									<img src="img/page06-07.png" alt="" />
								</a>
							</div>
							<div class="page06-mother2">
								<a href="javascript:;">
									<img src="img/page06-07.png" alt="" />
								</a>
							</div>
							<div class="page06-mother-speech01">
								<a href="javascript:;">
									<img src="img/page06-03.png" alt="" />
								</a>
							</div>
							<div class="page06-mother-cloud">
								<a href="javascript:;">
									<img src="img/page06-02.png" alt="" />
								</a>
							</div>
							<div class="page06-mother-cloud2">
								<a href="javascript:;">
									<img src="img/page06-02.png" alt="" />
								</a>
							</div>
							<div class="page06-ball">
								<a href="javascript:;">
									<img src="img/page06-04.png" alt="" />
								</a>
							</div>
							<div class="page06-mother-speech02">
								<a href="javascript:;">
									<img src="img/page06-05.png" alt="" />
								</a>
							</div>
							<div class="page06-star">
								<a href="javascript:;">
									<img src="img/page06-06.png" alt="" />
								</a>
							</div>
							<div class="page06-mother-speech03">
								<a href="javascript:;">
									<img src="img/page06-01.png" alt="" />
								</a>
	
							</div>
							<div class="page06-speech03-p">
								<p>妈妈~</p>
							</div>
							<div class="page06-mother-title">
								<p>究极式———你自己看吧，说的很明白了</p>
							</div>
						</div>
					</div>
					
				</div>				
			</div>
			<!--page06结束-->
			
			<!--page07开始-->
			<div class="section">
				<div class="page page07">
					<div class="check">
						<div class="page07-shadow">
							<a href="javascript:;">
								<img src="img/page07-02.png" alt="" />
							</a>
						</div>
						<div class="content-border">
							<div class="page07-title">
								<p>在老妈眼里我没救了...</p>
							</div>
							<div class="page07-daughter">
								<a href="javascript:;">
									<img src="img/page07-04.png" alt="" />
								</a>
							</div>
							<div class="page07-btn">
								<a href="javascript:;">
									<img src="img/page07-01.png" alt="" />
								</a>
							</div>
							<div class="page07-btn2">
								<a href="javascript:;">
									<img src="img/page07-01.png" alt="" />
								</a>
							</div>
							<div class="page07-pointer">
								<a href="javascript:;">
									<img src="img/page07-05.png" alt="" />
								</a>
							</div>
							<div class="page07-pointer2">
								<a href="javascript:;">
									<img src="img/page07-05.png" alt="" />
								</a>
							</div>
						</div>
					
					</div>
					
				</div>
			</div>
			<!--page07结束-->
			
			<!--page08开始-->
			<div class="section">
				<div class="page page08">
					<div class="check">
						<div class="page08-mother-speech01">
							<a href="javascript:;">
								<img src="img/page08-03.png" alt="" />
							</a>						
						</div>
						<div class="content-border">
								<div class="page08-btn">
									<a href="javascript:;">
										<img src="img/page08-02.png" alt="" />
									</a>
								</div>
								<div class="page08-daughter">
									<a href="javascript:;">
										<img src="img/page08-04.png" alt="" />
									</a>
								</div>
								<div class="page08-son">
									<a href="javascript:;">
										<img src="img/page08-01.png" alt="" />
									</a>
								</div>
						</div>
					</div>
						
					
				</div>
			</div>
			<!--page08结束-->
			
			<!--page09开始-->
			<div class="section">
				<div class="page page09">
					<div class="check">
						<div class="content-border">
							<div class="content-border">
						<div class="page09-big-border">
							<a href="javascript:;">
								<img src="img/page06-0.png" alt="" />
							</a>
						</div>
						<div class="page09-mother">
							<a href="javascript:;">
								<img src="img/page09-04.png" alt="" />
							</a>
						</div>
						<div class="speech-border">
							<a href="javascript:;">
								<img src="img/page06-01.png" alt="" />
							</a>
						</div>
						<div class="speech-title">
							<p>你中了几招?</p>
						</div>
						<div class="first-line">
							<div class="page09-border">
								<a href="javascript:;">
									<img src="img/page09-01.png" alt="" />
								</a>
								<div class="small-border">
									<a href="javascript:;">
										<img src="img/dianzan.png" alt="" />
									</a>
									<span>1662</span>
								</div>
							</div>
							<div class="page09-border">
								<a href="javascript:;">
									<img src="img/page09-06.png" alt="" />
								</a>
								<div class="small-border">
									<a href="javascript:;">
										<img src="img/dianzan.png" alt="" />
									</a>
									<span>1662</span>
								</div>
							</div>
						</div>
						<div class="first-line">
							<div class="page09-border">
								<a href="javascript:;">
									<img src="img/page09-03.png" alt="" />
								</a>
								<div class="small-border">
									<a href="javascript:;">
										<img src="img/dianzan.png" alt="" />
									</a>
									<span>1662</span>
								</div>
							</div>
							<div class="page09-border">
								<a href="javascript:;">
									<img src="img/page09-02.png" alt="" />
								</a>
								<div class="small-border">
									<a href="javascript:;">
										<img src="img/dianzan.png" alt="" />
									</a>
									<span>1662</span>
								</div>
							</div>
						</div>
						<div class="first-line">
							<div class="page09-border">
								<a href="javascript:;">
									<img src="img/page09-05.png" alt="" />
								</a>
								<div class="small-border">
									<a href="javascript:;">
										<img src="img/dianzan.png" alt="" />
									</a>
									<span>1662</span>
								</div>
							</div>

						</div>
						
					</div>
					</div>
					
				</div>
			</div>
			
			<!--page09结束-->
			
			
		</div>
		
		
		
		
		
		
		<!--引入js，注意依赖关系-->
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/jquery.fullPage.min.js"></script>
		
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
		<!--fullpage的初始化-->
		<script>
			
     	//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
//	     document.getElementById('bg-music').play(); 
//	    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
//	    document.addEventListener("WeixinJSBridgeReady", function () { 
//	        document.getElementById('bg-music').play(); 
//  	}, false); 
		function audioAutoPlay(id){  
		    var audio = document.getElementById(id),  
		        play = function(){  
		            audio.play();  
		            document.removeEventListener("touchstart",play, false);  
		        };  
		    audio.play();  
		    document.addEventListener("WeixinJSBridgeReady", function () {  
		        play();  
		    }, false);  
		    document.addEventListener('YixinJSBridgeReady', function() {  
		        play();  
		    }, false);  
		    document.addEventListener("touchstart",play, false);  
		}  
		audioAutoPlay('bg-music');	//传入audio标签的id名

			
			
			$(".music img").click(function(){
				var onoff=$(".page-audio audio").attr("")
			})
			//jq写法,$("")获取页面元素，双引号里面写css3选择器
			$("#web").fullpage({
				
				//对象写法
				//属性:值（数字、字符串、对象、布尔值、null、undefined、函数）
//				sectionsColor:["skyblue","rgba(243,123,124)","#0000ff"],
				navigation:true,
				tochSensitivity:10,
				loopBottom:true,
				loopTop:true,
			
				
				//当滑到每一页结束之后触发的函数
				//可以在触发时给每个页面添加激活类（active）
				//参数：锚点序号，页面的序号
				afterLoad:function(anchorIndex,index){
//					console.log("滑到结束了");
//					console.log(anchorIndex,index);
					//虽然此处的index是从1开始，但是js的序号都是从0开始的
					
					
					if( index==1 ){
						
						$(".page").removeClass("active");
						$(".page01").addClass("active");
						
						
		 			}
					if( index==2 ){
						
						$(".page").removeClass("active");
						$(".page02").addClass("active");
						
						
		 			}
					if( index==3 ){						
						$(".page").removeClass("active");
						$(".page03").addClass("active");
						
		 			}
					if( index==4 ){						
						$(".page").removeClass("active");
						$(".page04").addClass("active");						
		 			}
					if( index==5 ){						
						$(".page").removeClass("active");
						$(".page05").addClass("active");						
		 			}
					if( index==6 ){						
						$(".page").removeClass("active");
						$(".page06").addClass("active");						
		 			}
					if( index==7 ){						
						$(".page").removeClass("active");
						$(".page07").addClass("active");						
		 			}
					if( index==8 ){						
						$(".page").removeClass("active");
						$(".page08").addClass("active");						
		 			}
					if( index==9 ){						
						$(".page").removeClass("active");
						$(".page09").addClass("active");						
		 			}
				},
				afterRender:function(){
					$(".page01").addClass("active");
					
				}
			});
			//在fullpage执行结束后，页面透明度恢复为1
			$("body").css({
				opacity:1
			})
			
		
	       
        		
		</script>
	</body>
</html>
